zx
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <script src="./js/rotary.js"></script>
    <!-- <script>
        window.onload = function() {
            var container = document.getElementById("container");
            var list = document.getElementById('list');
            var buttons = document.getElementById("buttons").getElementsByTagName("span");
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");
            var index = 1;
            var timer = null;
            var animated = false;
            var timmer2 = null;

            function animate(offset) {
                animated = true;
                var speed = offset / 30;
                var newLeft = parseInt(list.style.left) + offset;
                // list.style.left = newLeft + "px";
                // if (newLeft > -600) {
                //     list.style.left = -3000 + "px";
                // }
                // if (newLeft < -3000) {
                //     list.style.left = -600 + "px";
                // }
                var move = function() {
                    clearInterval(timer);
                    if ((speed > 0 && parseInt(list.style.left) < newLeft) || (speed < 0 && parseInt(list.style.left) > newLeft)) {
                        list.style.left = parseInt(list.style.left) + speed + "px";
                        timer = setTimeout(move, 10);
                    } else {
                        animated = false;
                        if (newLeft > -600) {
                            list.style.left = -3000 + "px";
                        }
                        if (newLeft < -3000) {
                            list.style.left = -600 + "px";
                        }
                    }
                }
                move();
            }

            function play() {
                timer2 = setInterval(function() {
                    next.onclick();
                }, 3000);
            }

            function stop() {
                clearInterval(timer2);
                console.log(animated);
            }

            function butonsShow() {
                for (var i = 0; i < buttons.length; i++) {
                    if (buttons[i].className == "on") {
                        buttons[i].className = "";
                    }
                }
                buttons[index - 1].className = "on";
            }
            prev.onclick = function() {

                if (animated) {
                    return;
                }
                index = index - 1;
                if (index < 1) {
                    index = 5;
                }

                animate(600);
                butonsShow();
            };
            next.onclick = function() {
                if (animated) {
                    return;
                }
                index = index + 1;
                if (index > 5) {
                    index = 1;
                }
                animate(-600);
                butonsShow();
            };

            for (var i = 0; i < buttons.length; i++) {
                (function(i) {
                    buttons[i].onclick = function() {
                        var clickIndex = parseInt(this.getAttribute("index"));
                        var offset = -600 * (clickIndex - index);
                        if (animated) {
                            return;
                        }
                        animate(offset);
                        index = clickIndex;
                        butonsShow();
                    }
                })(i);


            }
            container.onmouseover = stop;
            container.onmouseout = play;
            play();

        } -->
    </script>
</head>

<body>
    <div id="container">
        <div id="list" style="left: -600px;">
            <img src="5.jpg" alt="1" />
            <img src="2.png" alt="1" />
            <img src="8.jpg" alt="2" />
            <img src="7.jpg" alt="3" />
            <img src="6.jpg" alt="4" />
            <img src="5.jpg" alt="5" />
            <img src="1.jpg" alt="1" />
        </div>
        <div id="buttons">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div>
        <a href="js:;" id="prev" class="arrow">&lt;</a>
        <a href="js:;" id="next" class="arrow">&gt;</a>
    </div>

</body>

</html>